<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.chargeback_manage" :background="background" :border-bottom="false"
			title-color="#000000" back-icon-color="#000">
			<view class="navright" slot="right">
				<image src="../../../static/images/sx.png" mode="" @click="showscreen"></image>
			</view>
		</u-navbar>
		<view class="all">
			<scroll-view scroll-x="true">
				<view class="tabs">
					<u-tabs :list="headerList" :is-scroll="true" :current="current" @change="change"
						active-color="#FF0000">
					</u-tabs>
				</view>
			</scroll-view>
			<scroll-view   class="storehouse" scroll-y :style="{'height':vHeight + 'px'}" @scrolltolower="reachBottom">	
				<view class="allhouse" v-for="(item, index) in refundList" :key="index">
					<view class="housetop">
						<text>{{item.refundStatus | statusFilter}}</text>
						<text>{{item.createTime}}</text>
					</view>
					<view class="shop">
						<view class="day">

							<view class="day_tit">
								<text class="tit">{{i18n.chargeback_manage.refund_orde}}：</text>
								<text>{{item.refundOrderNo}}</text>
							</view>
							<view class="day_tit">
								<text class="tit">{{i18n.chargeback_manage.orderid}}：</text>
								<text>{{item.merOrderNo}}</text>
							</view>
							<view class="day_tit">
								<text class="tit">{{i18n.chargeback_manage.user_info}}：</text>
								<text>{{item.realName}}</text>
							</view>
							<view class="day_tit">
								<text class="tit">{{i18n.chargeback_manage.user_mailbox}}：</text>
								<text>{{item.email}}</text>
							</view>
							<view class="day_tit">
								<text class="tit">{{i18n.chargeback_manage.money}}：</text>
								<text>{{item.refundPrice}}</text>
							</view>

						</view>
						
						<view class="shop_bottom">
							<view class="put" @click="show(0,item.refundOrderNo,item.refundPrice)" v-if="item.refundStatus==0">
								{{i18n.chargeback_manage.refund}}
							</view>
							<view class="off" @click="show(1,item.refundOrderNo,item.refundPrice)" v-if="item.refundStatus==0">
								{{i18n.chargeback_manage.reject}}
							</view>
							<view class="joindel" @click="show(2,item.refundOrderNo,item.refundPrice,item.merRemark)">
								{{i18n.chargeback_manage.order_notes}}
							</view>
							<view class="details" @click="router('../chargeback_details/chargeback_details?merOrderNo='+item.merOrderNo)">
								{{i18n.chargeback_manage.details}}
							</view>
						</view>
					</view>
				</view>
				
			 
				<u-loadmore :status="status" :load-text="i18n.commission_details.loadText"/>
			</scroll-view>


		</view>
		
		<u-popup v-model="del" mode="center" width="600" :height="pHeight" border-radius="20">
			
			<block v-if="condition==0">
				<view class="mdtitle">
					{{hint}}
				</view>
				<text class="wb">{{i18n.chargeback_manage.refund_orde}}：{{showOrderNo}}</text>
				<view class="wb">
					<text>{{i18n.chargeback_manage.money}}：{{showPrice}}</text>
				</view>
				<view class="mdbuts">
					<view class="but_l" @click="confirm">
						{{i18n.chargeback_manage.filter.confirm}}
					</view>
					<view class="but_r" @click="del = false">
						{{i18n.chargeback_manage.no}}
					</view>
				</view>
			</block>
			<block v-if="condition==1">
				<view class="mdtitle">
					{{hint}}
				</view>
				<text class="wb">{{i18n.chargeback_manage.refund_orde}}：{{showOrderNo}}</text>
				<view class="content">
					<textarea v-model="reason" :placeholder="i18n.chargeback_manage.textare" maxlength="-1" />
				</view>
				<view class="mdbuts">
					<view class="but_l" @click="confirm">
						{{i18n.chargeback_manage.filter.confirm}}
					</view>
					<view class="but_r" @click="del = false">
						{{i18n.chargeback_manage.no}}
					</view>
				</view>
			</block>
			<block v-if="condition==2">
				<view class="mdtitle">
					{{hint}}
				</view>
				<view class="content cont_top">
					<textarea v-model="remark" :placeholder="i18n.chargeback_manage.textare2" maxlength="-1" />
				</view>
				<view class="mdbuts">
					<view class="but_l" @click="confirm">
						{{i18n.chargeback_manage.filter.confirm}}
					</view>
					<view class="but_r" @click="del = false">
						{{i18n.chargeback_manage.no}}
					</view>
				</view>
			</block>
		</u-popup>
		<u-popup v-model="screen" width="570" mode="right">
			<view class="showright">
				<view class="scree_tit">
					{{i18n.chargeback_manage.filter.Filter_tit}}
				</view>
				<view class="smtit">
					{{i18n.chargeback_manage.filter.orderid}}
				</view>
				<view class="selects">
					<input v-model="merOrderNo" type="text" class="input" :placeholder="i18n.chargeback_manage.filter.order_placeholder" />
				</view>
				<view class="smtit">
					{{i18n.chargeback_manage.filter.refund_orde}}
				</view>
				<view class="selects">
					<input v-model="refundOrderNo" type="text" class="input" :placeholder="i18n.chargeback_manage.filter.refund_placeholder" />
				</view>

				<view class="rightbut">
					<view class="rightconfim"  @click="resetForm">
						{{i18n.chargeback_manage.filter.reset}}
					</view>
					<view class="rightoff" @click="submitForm">
						{{i18n.chargeback_manage.filter.confirm}}
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>
	let that;
	export default {
		filters: {
			statusFilter(value) {
				return that.i18n.chargeback_manage.status_map[value];
			},
		},
		beforeCreate () {
			that = this
		},
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				list: [],
				current: 0,
				del: false,
				screen: false,
				condition: '',
				hint: '',
				vHeight: 450,
				status: 'loadmore',
				merOrderNo: '',
				refundOrderNo: '',
				refundList: [],
				currentPage: 0,
				totalPage: 0,
				refundStatus: 9,
				showOrderNo: '',
				showPrice: '',
				pHeight: '270px',
				reason: '',
				remark: '',
				headerList: []
			}
		},
		onLoad() {
			this.getRefundListData();
			this.getStatusData();
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang();
			uni.getSystemInfo({
				success: (res) => {
					this.vHeight = res.windowHeight - 95;
					console.log(res.windowHeight);
				}
			});
			this.headerList = this.i18n.chargeback_manage.list;
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			resetForm() {
				this.merOrderNo = '';
				this.refundOrderNo =  '';
			},
			submitForm(){
				this.screen = false; 
				this.getNewData();
			},
			reachBottom() {
				this.getRefundListData();
			},
			change(index) {
				this.current = index;
				switch (index) { 
				  case 0: this.refundStatus = 9; 
				  break; 
				  case 1: this.refundStatus = 0; 
				  break; 
				  case 2: this.refundStatus = 1; 
				  break; 
				  case 3: this.refundStatus = 2; 
				  break; 
				  case 4: this.refundStatus = 3; 
				  break; 
				}
				this.getNewData();
			},
			showscreen() {
				this.screen = true
			},
			show(index,orderNo,price,merRemark) {
				this.del = true;
				this.condition = index;
				this.showOrderNo = orderNo;
				this.showPrice = price;
				this.remark = merRemark;
				
				if (index == 0) {
					this.pHeight = '240px';
					this.hint = this.i18n.chargeback_manage.deal_with
				} else if (index == 1) {
					this.pHeight = '270px';
					this.hint = this.i18n.chargeback_manage.reason
					this.reason = ''
				} else if (index == 2) {
					this.pHeight = '270px';
					this.hint = this.i18n.chargeback_manage.remark
				}
			},
			getNewData(){
				this.refundList = [];
				this.currentPage = 0;
				this.totalPage = 0;
				this.getRefundListData();
				this.getStatusData();
			},
			getRefundListData() {
				this.status = 'loading';
				if(this.currentPage>0 && this.totalPage>0 && this.currentPage>=this.totalPage){
					this.status = 'nomore';
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/refund/order/list',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						page: this.currentPage+1,
						refundStatus:this.refundStatus,
						merOrderNo:this.merOrderNo,
						refundOrderNo:this.refundOrderNo,
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.refundList = this.refundList.concat(res.data.data.list);
						this.currentPage = res.data.data.page;
						this.totalPage = res.data.data.totalPage;
						if(this.currentPage>=this.totalPage){
							this.status = 'nomore';
						}else{
							this.status = 'loadmore';
						}
					}
				})
			},
			getStatusData() {
				global.$http.request({
					url: '/api/admin/merchant/refund/order/status/num',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.headerList = this.i18n.chargeback_manage.list;
						this.headerList[0].name = this.headerList[0].name.replace('(0)','（' + res.data.data.all +'）');
						this.headerList[1].name = this.headerList[1].name.replace('(0)','（' + res.data.data.await +'）');
						this.headerList[2].name = this.headerList[2].name.replace('(0)','（' + res.data.data.reject+'）');
						this.headerList[3].name = this.headerList[3].name.replace('(0)','（' + res.data.data.refunding +'）');
						this.headerList[4].name = this.headerList[4].name.replace('(0)','（' + res.data.data.refunded +'）');
					}
				})
			},
			doRefund() {
				global.$http.request({
					url: '/api/admin/merchant/refund/order/refund',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						refundOrderNo:this.showOrderNo,
					}
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_success,
						  	icon: 'none',
						  	duration: 3000
						})
						this.form.money = '';
						this.getNewData();
					}else{
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_fail,
						  	icon: 'none',
						  	duration: 3000
						})
					}
				})
			},
			doRefuse() {
				if(!this.reason){
					uni.showToast({
					  	title: this.i18n.chargeback_manage.textare,
					  	icon: 'none',
					  	duration: 3000
					})
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/refund/order/refund/refuse',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						refundOrderNo: this.showOrderNo,
						reason:  this.reason
					}
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_success,
						  	icon: 'none',
						  	duration: 3000
						})
						this.reason = '';
						this.getNewData();
					}else{
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_fail,
						  	icon: 'none',
						  	duration: 3000
						})
					}
				})
			},
			doRemark() {
				if(!this.remark){
					uni.showToast({
					  	title: this.i18n.chargeback_manage.textare2,
					  	icon: 'none',
					  	duration: 3000
					})
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/refund/order/mark',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'POST',
					data:{
						refundOrderNo: this.showOrderNo,
						remark:  this.remark
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_success,
						  	icon: 'none',
						  	duration: 3000
						})
						this.remark = '';
						this.getNewData();
					}else{
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_fail,
						  	icon: 'none',
						  	duration: 3000
						})
					}
				})
			},
			
			//弹框确定
			confirm() {
				this.del = false
				if (this.condition == 0) {
					this.doRefund();
				}
				if (this.condition == 1) {
					this.doRefuse();
				}
				if (this.condition == 2) {
					this.doRemark();
				}
				
			},

			//跳转路由
			router(path) {
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;

			.navright {
				padding-right: 30rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.all {
				.tabs {
					display: flex;
					background-color: #fff;
					height: 88rpx;
				}

				.storehouse {
					margin-top: 11rpx;

					.allhouse {
						background-color: #fff;

						.housetop {
							display: flex;
							justify-content: space-between;
							width: 750rpx;
							background: #666666;
							padding: 22rpx 43rpx 22rpx 26rpx;



							text {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
							}
						}

						.shop {

							.day {
								margin-top: 10rpx;
								background-color: #fff;
								padding: 30rpx 31rpx 4rpx 31rpx;

								.day_tit {
									padding-bottom: 27rpx;
									display: flex;
									align-items: center;

									.tit {
										display: block;
										font-size: 26rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #000000;
									}

									text {
										font-size: 26rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #4D4D4D;
									}
								}

								.status {
									padding-bottom: 26rpx;
									display: flex;
									justify-content: space-between;
									font-size: 26rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #000000;

									text {
										color: #4D4D4D;
									}

									.stat_tit {
										display: flex;

										view {
											width: 135rpx;
										}
									}

									.stat_money {
										color: #FF0000;
									}

									.stat_but {
										margin-top: 11rpx;
										width: 154rpx;
										height: 48rpx;
										background: #0F82FF;
										border-radius: 24rpx;
										text-align: center;
										line-height: 48rpx;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
									}
								}

								.cost {
									padding-bottom: 27rpx;
									display: flex;
									align-items: center;

									view {
										font-size: 26rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #000000;
									}

									text {
										font-size: 26rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #FF0000;
									}
								}

								.cost2 {
									display: flex;
									align-items: center;

									view {
										font-size: 26rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #000000;
									}

									text {
										font-size: 26rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #FF0000;
									}
								}

								.allmoney {
									display: flex;
									align-items: center;
									justify-content: space-between;

									.details {
										width: 154rpx;
										height: 48rpx;
										text-align: center;
										line-height: 48rpx;
										background: #0F82FF;
										border-radius: 24rpx;

										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
									}

									.cost {
										display: flex;
										align-items: center;

										view {
											font-size: 26rpx;
											font-family: Source Han Sans CN;
											font-weight: 400;
											color: #000000;
										}

										text {
											font-size: 26rpx;
											font-family: Source Han Sans CN;
											font-weight: 400;
											color: #FF0000;
										}
									}
								}
							}


							.shop_bottom {
								padding: 16rpx 0 20rpx 0;
								display: flex;
								justify-content: space-evenly;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								margin: 0 50rpx 0 25rpx;
								line-height: 48rpx;
								text-align: center;

								.join_del {
									width: 410rpx;
									height: 48rpx;
									text-align: center;
									background: #304156;
									border-radius: 24rpx;
									color: #FFFFFF;
								}

								.details {
									width: 160rpx;
									height: 52rpx;
									background: #304156;
									border-radius: 26rpx;
									color: #FFFFFF;
								}


								.recovery {
									width: 160rpx;
									height: 52rpx;
									background: #0F82FF;
									border-radius: 26rpx;
									border-radius: 24rpx;
									color: #FFFFFF;
								}

								.delete {
									width: 160rpx;
									height: 52rpx;
									background: #0F82FF;
									border-radius: 26rpx;

									border: 1rpx solid #B3B3B3;
									text-align: center;
									color: #FFFFFF;
								}

								.put {
									width: 160rpx;
									height: 52rpx;
									background: #0F82FF;
									border-radius: 26rpx;
									border: 1rpx solid #B3B3B3;
									border-radius: 24rpx;
									color: #FFFFFF;
								}

								.off {
									width: 160rpx;
									height: 52rpx;
									background: #0F82FF;
									border-radius: 26rpx;
									border-radius: 24rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
								}

								.joindel {
									width: 160rpx;
									height: 52rpx;
									background: #808080;
									border-radius: 24rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
								}
							}
						}
					}
				}
			}

			.mdtitle {
				padding-top: 49rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				text-align: center;
			}

			.wb {
				display: block;
				text-align: left;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				padding: 32rpx 0 32rpx 32rpx;
			}

			.content {
				padding: 22rpx;
				width: 500rpx;
				margin: 0 auto;
				height: 178rpx;
				background: #F2F2F2;
				margin-left: 16px;
				
				textarea {
					width: 450rpx;
					height: 140rpx;
					background: #F2F2F2;
				}
			}

			.cont_top {
				margin: 39rpx auto 60rpx auto;
			}

			.mdbuts {
				margin-top: 52rpx;
				line-height: 64rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: space-around;
				padding: 0 90rpx;

				.but_l {
					width: 160rpx;
					height: 64rpx;
					background: #304156;
					border-radius: 32rpx;
				}

				.but_r {
					width: 160rpx;
					height: 64rpx;
					background: #B3B3B3;
					border-radius: 32rpx;
				}
			}

			.showright {
				padding-left: 14rpx;

				.scree_tit {
					padding: 78rpx 0 64rpx 0;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.smtit {
					padding-bottom: 23rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.selects {
					padding: 30rpx 10rpx;
					margin: 0 15rpx 65rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #F0F0F0;
					border-radius: 10rpx;
					width: 100%;
					text {

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #B3B3B3;
					}

					.input {
						width: 100%;
					}

					image {
						width: 10rpx;
						height: 16rpx;
					}
				}

				.rightbut {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 34rpx;
					font-family: PingFang SC;
					line-height: 92rpx;
					text-align: center;
					padding: 0 25rpx;

					.rightconfim {
						width: 240rpx;
						height: 92rpx;
						border: 2rpx solid #999999;
						border-radius: 46rpx;
						font-weight: 400;
						color: #999999;
					}

					.rightoff {
						width: 240rpx;
						height: 92rpx;
						background: #304156;
						border-radius: 46rpx;

						color: #FFFFFF;

					}
				}
			}
		}
	}
</style>
